<template>
	<view>
		<!-- 顶部搜索 S-->
		
				
			<!-- 顶部搜索 E-->
			<!--旅游攻略筛选S-->
			<view class="shaixuan-box tp-h88 tp-bgf level_align tp-bbox flex_between tp-fc333 tp-fz28 tp-ptb0lr30 tp-pr tp-mb2" v-if="number==0"
			>
				<view class="level_align tp-h100" @click="(showChange(0))" :style="{color: showIndex == 0 ? '#00B4FF': ''}">
					<text style="padding-left: 50rpx;padding-right: 80rpx;">全部</text>
					
				</view>
				<view class="level_align  tp-h100" @click="showChange1(1)" :style="{color: showIndex == 1 ? '#00B4FF': ''}">
					<text class="tp-mr10">时间</text>
					<view class="" style="width: 30rpx;">
						<image  class="sanjiao" src="../static/icon/sanjiao1.png" mode="" style="position: absolute;top: 35rpx;"></image>
						<image class="sanjiao" src="../static/icon/sanjiao.png" mode="" style="position: absolute;top: 48rpx;"></image>
						
					</view>
				</view>
				<view class="level_align tp-h100 tp-ptb0lr50" @click="showChange2(2)" :style="{color: showIndex == 2 ? '#00B4FF': ''}">
					<text class="tp-mr10">阅读量</text>
					<view class="" style="width: 30rpx;">
						<image  class="sanjiao" src="../static/icon/sanjiao1.png" mode="" style="position: absolute;top: 35rpx;"></image>
						<image class="sanjiao" src="../static/icon/sanjiao.png" mode="" style="position: absolute;top: 48rpx;"></image>
						
					</view>
				</view>
			</view>
			<!--旅游攻略筛选E-->
			<!-- 旅游攻略列表 S-->
			<view class="listone" @click="seemessage()" v-if="number==0">
				<view class="yw">
					<view class="ywleft">
						<image class="ywimg" :src="www + 'imgs/snap/jq1.png'" mode=""></image>
					</view>
					<view class="ywright">
						<view class="ywtx">
							<image class="ywperson" :src="www + 'imgs/snap/jq1.png'" mode=""></image>
							<view class="ywname">
								<text>朝暮窃流年</text>
							</view>
							<view class="ywtittime">
								<text>1小时前</text>
							</view>
						</view>
						<view class="ywtit ">
							<text class="ellispsis1 ywtitneirong">最爱的人自身是,最美的人在路上!最美的人在路上</text>
						</view>
						<view class="ywbiaoqian">
							<text class="biaoqiantit ellispsis1">#美丽风景.田园风带我去多群无#</text>
							<view class="ywsee">
								<image class="ywseeimg" src="../../static/imgs/icons/see.png" mode=""></image>
								<text class="ywseenum">64512</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 旅游攻略列表 E-->
		</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer"
	//获取系统状态栏高度
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {
			uniDrawer
		},
		data() {
			return {
				isHang: false, // 行排列true 还是 块false
				statusBarHeight: statusBarHeight, //抽屉
				mask: true, //抽屉
				left: 'left', //抽屉
				drawWid: 300, //抽屉
				maskClick: true, //抽屉
				mode: 'right', //抽屉
				shaixuan: false,
				isActive: false, //标签的点击状态
				isActive1: false, //标签的点击状态
				isActive2: false, //标签的点击状态
				number: 0, //顶部状态
				number1: 0, //顶部状态
				showIndex: 2,
				lblist: [{
						name: '全部'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					},
					{
						name: '山川'
					}
				],
				fllist: [{
						name: '全部'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					},
					{
						name: '山川'
					}
				],
				jdlist: [{
						name: '全部'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					}, {
						name: '山川'
					},
					{
						name: '山川'
					}
				],
				hotelType: ['全部', '春季', '夏季', '秋季', '冬季'], // 季节类型
				topheight:'',
			};
		},
		onLoad() {
			console.log(statusBarHeight)
			this.topheight = statusBarHeight*2
			console.log(this.topheight)
		},
		methods: {
			//点击切换状态
			numType() {
				if (this.number == 1) {
					this.number = 0
					this.number1 = 0
				}
			},
			numType1() {
				if (this.number1 == 0) {
					this.number1 = 1
					this.number = 1
				}
			},
			//点击改变抽屉中标签classs
			changeValue(index, item) {
				console.log(index, item)
				this.isActive = index;
			},
			changeValue1(index, item) {
				this.isActive1 = index;
			},
			changeValue2(index, item) {
				this.isActive2 = index;
			},
			//显示抽屉
			show() {
				this.$refs.draw.open();
			},
			hide() {
				this.$refs.draw.close();
			},
			//游记列表详情
			seemessage() {
				uni.navigateTo({
					url: '/pagesSecond/strategy/strategyMessage'
				})
			},
			showChange(ind) {
				this.showIndex = ind
			},
			showChange1(ind) {
				this.showIndex = ind
			},
			showChange2(ind) {
				this.showIndex = ind
			},
			showChange3(ind) {
			},
			showChange4() {
				this.showIndex = 2
				this.$refs.popup.open()
			},
			gosee(item) {
				/* var add = JSON.stringify(item)
				uni.navigateTo({
					url: '/PagesSecond/scenic/scenicDetail?item=' + add
				}) */
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-drawer__content {
		width: 600rpx;
	}

	/* topcss S-- */
	.topbottom {
		width: 44rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		position: relative;
		top: 80rpx;
		left: 155rpx;
	}

	.topbottom1 {
		width: 44rpx;
		height: 4rpx;
		background: #FFFFFF;
		border-radius: 2rpx;
		position: relative;
		top: 80rpx;
		left: 400rpx;
	}

	.top-box {
		background: #2499FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;
		background: #00B4FF;

		.topname {
			width: 100%;
			height: 98rpx;

			.topnametit {
				float: left;
				margin-left: 110rpx;
				width: 135rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 98rpx;
			}

			.topnametit1 {
				float: left;
				margin-left: 110rpx;
				width: 135rpx;
				height: 28rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 98rpx;

			}

			.shu {
				float: left;
				width: 44rpx;
				height: 4rpx;
				background: #FFFFFF;
				border-radius: 2rpx;

			}

			.avtive {
				width: 117rpx;
				height: 28rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;

			}
		}

		.searchbox {
			width: 100%;
			// padding-bottom: 12rpx;
		}
	}

	.search {

		/deep/ .uni-searchbar {
			height: 56rpx;

		}

		/deep/ .uni-searchbar__cancel {
			line-height: 56rpx;
		}
	}

	/deep/ .uni-searchbar {
		width: 690rpx;
		height: 56rpx;
		padding: 0 0 5rpx 20rpx !important;
		background: #00B4FF !important;
	}

	/deep/ .uni-searchbar__box {
		width: 480rpx !important;
		height: 56rpx !important;
		background: #FFFFFF !important;
	}

	/deep/ .uni-searchbar__text-placeholder {
		color: #CCCCCC !important;
	}


	/* topcss E-- */
	/* 游玩攻略css S-- */
	.listone {
		width: 100%;
		background: #FFFFFF;
	}

	.yw {
		width: 93%;
		height: 160rpx;
		margin: 0 auto;
		padding: 20rpx 0 20rpx 0rpx;
		display: flex;
		justify-content: space-between;

		.ywleft {
			width: 220rpx;
			height: 160rpx;
			border-radius: 8rpx;
		}

		.ywright {
			width: 450rpx;
			height: 160rpx;

			.ywtx {
				width: 100%;
				height: 60rpx;
				margin: 0 0 20rpx 0;

				.ywperson {
					width: 56rpx;
					height: 56rpx;
					float: left;
					margin: 0 20rpx 0 0;
					border-radius: 50%;
				}

				.ywname {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				.ywtittime {
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;

				}
			}
		}

		.ywtit {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			width: 100%;
			margin-bottom: 10rpx;
		}

		.ywbiaoqian {
			width: 100%;
			height: 28rpx;

			.biaoqiantit {
				width: 240rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #00B4FF;
				float: left;
			}

			.ywsee {
				width: 120rpx;
				font-size: 24rpx;
				line-height: 28rpx;
				font-weight: 500;
				color: #999999;
				float: right;

				.ywseeimg {
					width: 28rpx;
					height: 24rpx;
					float: left;
					margin-top: 5rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	/* 游玩攻略css E-- */
	/* 筛选弹窗css S-- */
	.lblist {
		height: 242rpx;
		overflow: hidden;
	}

	.shaixuan {
		width: 600rpx;
		height: 1206rpx;
		background: #FFFFFF;

		.leibie {
			width: 100%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 40rpx 517rpx 20rpx 30rpx;
		}
	}

	.lbbiaoqian {
		padding: 0 0 40rpx 30rpx;
		width: 100%;

		/* min-height: 100rpx; */
		.active {
			margin: 20rpx 20rpx 0 0;
			padding: 0 16rpx;
			float: left;
			height: 48rpx;
			background: #FF4A37;
			border: 2rpx solid #FF4A37;
			text-align: center;

			.lbtit {
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF !important;
				line-height: 48rpx;
			}
		}

		.lbbiaoqianlist {
			margin: 20rpx 20rpx 0 0;
			padding: 0 16rpx;
			float: left;
			height: 48rpx;
			border: 2rpx solid #CCCCCC;
			border-radius: 4rpx;
			text-align: center;

			.lbtit {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				line-height: 48rpx;
			}
		}
	}

	.quxiao {
		position: absolute;
		bottom: 20rpx;
		left: 61rpx;
		width: 240rpx;
		height: 80rpx;
		background: #EBEBEB;
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #666666;
		line-height: 80rpx;
	}

	.queding {
		position: absolute;
		bottom: 20rpx;
		right: 60rpx;
		width: 240rpx;
		height: 80rpx;
		background: #FF4A37;
		border-radius: 0 40rpx 40rpx 0;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;


	}

	.tp-img36 {
		margin-right: 20rpx;
	}

	/* 筛选弹窗css E-- */

	/* 投稿列表css S-- */
	.list-hang {
		margin-bottom: 2rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.posimg {
		width: 24rpx;
		height: 22rpx;
		position: relative;
		left: 330rpx;
		top: -25rpx;
	}

	.posimg1 {
		width: 24rpx;
		height: 22rpx;
		position: relative;
		left: 190rpx;
		top: -25rpx;
	}

	.list-box {
		margin-top: 20rpx;

		.hang-img {
			width: 240rpx;
			height: 150rpx;
		}

		.hang-right {
			height: 150rpx;

			.tgaddress {
				margin-top: 10rpx;

			}
		}

		.huang-color {
			color: #999999;
		}

		.list-kuai:nth-child(1) {
			margin-top: 30rpx;
		}

		.list-kuai:nth-child(2) {
			margin-top: 30rpx;
		}

		.list-kuai {
			width: 50%;

			.kuai-img {
				margin: 0rpx 30rpx 0rpx 0rpx;
				width: 336rpx;
				height: 210rpx;
				border-radius: 4rpx;

			}
		}


	}

	/* 投稿列表css E-- */
</style>
